<template>
  <div class="chart">
    <div class="top">
      <!-- 顶部导航栏 -->
      <van-nav-bar title="市场数据" class="title">
        <template #left>
          <i
            class="iconfont iconbtn_nav_back"
            style="font-size: 50px"
            @click="$router.back()"
          ></i>
        </template>
      </van-nav-bar>

      <!-- 下拉菜单 -->
      <dropdown />
    </div>
    <div class="bottom">
      <div class="salary-box">
        <h3 class="title">工资收入</h3>

        <div class="salary-head">
          <span>区间</span>
          <span>占比</span>
        </div>

        <!-- 圆环中间文字 -->
        <div class="label">
          <p>平均</p>
          <p>¥12345</p>
        </div>
        <!-- 放饼状图 -->
        <pie />
        <div class="bottom-info">近1年 15025 份样本 / 可信度:高</div>
      </div>

      <div class="experience-box">
        <h3 class="title">工作经验</h3>
        <!-- 放折线图 -->
        <zline />
      </div>

      <div class="average-box">
        <h3 class="title">历年平均工资变化趋势</h3>
        <!-- 放折线图 -->
        <zline />
      </div>

      <div class="situation-box">
        <h3 class="title">就业形势</h3>
        <!-- 放平滑曲线折线图 -->
        <zline :isSmooth="!isSmooth" />
      </div>
    </div>
  </div>
</template>

<script>
import pie from './components/pie.vue'
import zline from './components/line.vue'
import dropdown from './components/dropdown.vue'
export default {
  components: { pie, dropdown, zline },
  data () {
    return {
      isSmooth: false // 是否是平滑曲线
    }
  },
  methods: {}
}
</script>

<style lang="less">
.chart {
  .top {
    .van-nav-bar__title {
      font-family: PingFangSC-Semibold;
      font-size: 16px !important;
      color: #6e5757;
    }
  }
  .bottom {
    margin-left: 20px;
    .title {
      font-weight: 400;
      font-size: 18px;
    }
    .salary-box {
      position: relative;
      .salary-head {
        display: flex;
        width: 130px;
        justify-content: space-between;
        font-size: 15px;
        color: #b4b4bd;
        position: absolute;
        right: 14%;
        top: 25%;
      }
      .label {
        font-size: 12px;
        text-align: center;
        position: absolute;
        top: 48%;
        left: 14%;
        z-index: 1;
      }
      .bottom-info {
        font-size: 0.32rem;
        color: #b4b4bd;
        text-align: center;
      }
    }
  }
}
</style>
